document.addEventListener('DOMContentLoaded', () => {
    const recordButton = document.getElementById('recordButton');
    const stopButton = document.getElementById('stopButton');
    const tooltip = document.getElementById('tooltip');
    const progressCircle = document.querySelector('.progress-ring__circle--progress');
    const stars = document.querySelectorAll('#ratingArea .star');
    
    const radius = progressCircle.r.baseVal.value;
    const circumference = 2 * Math.PI * radius;
    let isRecording = false;
    let timer;

    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
    progressCircle.style.strokeDashoffset = circumference;

    // Initialize stars on load
    updateStars(0);

    function updateStars(score) {
        stars.forEach((star, index) => {
            star.classList.remove('filled');
            star.textContent = '☆';

            if (parseInt(star.dataset.value) <= score) {
                setTimeout(() => {
                    star.textContent = '★';
                    star.classList.add('filled');
                }, index * 100); // Stagger the animation
            }
        });
    }

    function startRecording() {
        if (isRecording) return;
        
        isRecording = true;
        recordButton.classList.add('recording');
        tooltip.classList.add('visible');
        
        updateStars(0); // Reset stars when starting
        progressCircle.style.transition = 'none';
        progressCircle.style.strokeDashoffset = circumference;
        progressCircle.getBoundingClientRect();

        progressCircle.style.transition = 'stroke-dashoffset 3s linear';
        progressCircle.style.strokeDashoffset = '0';

        clearTimeout(timer);
        timer = setTimeout(() => {
            stopRecording(true); // Pass a flag to indicate auto-stop
        }, 3000);
    }

    function stopRecording(autoStopped = false) {
        if (!isRecording) return;

        isRecording = false;
        recordButton.classList.remove('recording');
        tooltip.classList.remove('visible');
        clearTimeout(timer);
        
        // Keep the progress bar full
        progressCircle.style.transition = 'none'; 
        progressCircle.style.strokeDashoffset = '0';

        if (autoStopped) {
            updateStars(3); // Automatically set 3 stars
        } else {
            const mockScore = Math.floor(Math.random() * 5) + 1;
            updateStars(mockScore);
        }
    }

    recordButton.addEventListener('click', (e) => {
        e.preventDefault();
        if (!isRecording) {
            startRecording();
        }
    });

    stopButton.addEventListener('click', (e) => {
        e.preventDefault();
        stopRecording();
    });

    window.addEventListener('keydown', (e) => {
        if (e.code === 'Space') {
            e.preventDefault();
            if (!isRecording) {
                startRecording();
            } else {
                stopRecording();
            }
        }
    });

    // Initial call to display empty stars
    updateStars(0);
});